<template>
  <div id="testDiv"></div>
  <nut-cell title="展示弹出层" is-link @click="showBasic = true"></nut-cell>
  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showBasic"
    >正文</nut-popup
  >
  <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
  <nut-popup
    position="top"
    :style="{ height: '20%' }"
    v-model:visible="showTop"
  ></nut-popup>
  <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
  <nut-popup
    position="bottom"
    :style="{ height: '20%' }"
    v-model:visible="showBottom"
  ></nut-popup>
  <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
  <nut-popup
    position="left"
    :style="{ width: '20%', height: '100%' }"
    v-model:visible="showLeft"
  ></nut-popup>
  <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
  <nut-popup
    position="right"
    :style="{ width: '20%', height: '100%' }"
    v-model:visible="showRight"
  ></nut-popup>

  <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
  <nut-popup
    position="bottom"
    closeable
    :style="{ height: '20%' }"
    v-model:visible="showIcon"
  ></nut-popup>
  <nut-cell
    title="图标位置"
    is-link
    @click="showIconPosition = true"
  ></nut-cell>
  <nut-popup
    position="bottom"
    closeable
    close-icon-position="top-left"
    :style="{ height: '20%' }"
    v-model:visible="showIconPosition"
  ></nut-popup>
  <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
  <nut-popup
    position="bottom"
    closeable
    close-icon-position="top-left"
    :style="{ height: '20%' }"
    v-model:visible="showCloseIcon"
  >
    <template #closeIcon>
      <Heart></Heart>
    </template>
  </nut-popup>

  <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
  <nut-popup
    position="bottom"
    closeable
    round
    :style="{ height: '30%' }"
    v-model:visible="showRound"
  ></nut-popup>

  <nut-cell
    title="指定挂载节点"
    is-link
    @click="showTeleport = true"
  ></nut-cell>
  <nut-popup
    :style="{ padding: '30px 50px' }"
    teleport="#testDiv"
    teleport-disable
    v-model:visible="showTeleport"
    >testDiv</nut-popup
  >

  <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
    <div @click="showPop2 = true">点击它</div>
  </nut-popup>
  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop2"
    >正文
  </nut-popup>
  <div class="test_div"></div>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";
import { Heart } from "@nutui/icons-vue";
export default {
  components: {
    Heart,
  },
  props: {},
  setup() {
    const state = reactive({
      showTop: false,
      showBottom: false,
      showLeft: false,
      showRight: false,
      showBasic: false,
      showIcon: false,
      showIconPosition: false,
      showCloseIcon: false,
      showRound: false,
      showTeleport: false,
      showPop1: false,
      showPop2: false,
    });
    return { ...toRefs(state) };
  },
};
</script>
<style lang="scss">
.test_div {
  height: 500px;
  border: 1px solid #eee;
  width: 100%;
}
</style>
